<template >
  <div>
    我是个人中心组件
    <button @click="turn()">回去关于页面</button>
    <button @click="goCart()">去到购物车页面</button>
    <button @click="goHome()">去到home页</button>
    <div style="height:600px;background:red;"></div>
    <button @click="back()">后退</button>
    <button @click="$router.go(-1)">后退一步</button>
  </div>
</template>
<script>
// vue路由的组件内部钩子函数

export default {
  name: "my",
  // beforeRouteEnter (to, from, next) {
  //   // 进入组件的时候触发
  //   console.log(to)
  //   console.log(from);
  //   if (from.name == "About") {
  //     next("/login");
  //   }
  //   next();
  //   // ...
  // },
  beforeRouteLeave (to, from, next) {
    // 离开组件触发
    console.log(to)
    console.log(from)
    // ...
    next();
  },
  // beforeRouteUpdate (to, from, next) {
  //   // 路由更新时触发
  // },
  methods: {
    turn () {
      // vue编程式路由
      // 简写的path跳转
      // this.$router.push("/about")
      // path跳转
      // this.$router.push({ path: "/about" });
      // name跳转
      this.$router.push({ name: "About" })
    },
    goCart () {
      // 传送用户id
      // vue有俩种传参方式  params和query 
      // params 浏览器内部传参 类似于post传参  地址栏不显示
      // query  地址栏传参 类似于get传参   地址栏显示 ?key=val&key=val
      // this.$router.push({ name: "Cart", query: { userid: "110", pid: "9527" } });
      this.$router.push({ name: "Cart", params: { uid: '999' } })
    },
    goHome () {
      //   this.$router.replace() 跳转组件不产生历史记录  
      this.$router.replace({ name: "Home" })
    },
    back () {
      // this.$router.go(num)  -1  后退一步  1 前进一步
      this.$router.go(-1);
    }
  },
}
</script>
<style lang="less">
</style>